<template>
  <div class="artitalkpage-container">
    <TempPage>
      <template #main-left>
        <div class="main-left">
          <section class="main-left-header">
            <h1 class="main-left-title">留言板</h1>
          </section>
          <section class="main-left-main">
            <article>
              <Artitalk :artitalks="artitalks"></Artitalk>
            </article>
          </section>
          <section class="main-left-footer"></section>
        </div>
      </template>
      <template #aside>
        <div>
          <!-- 用户模块 -->
          <Aside class="login-module">
            <template #header>
              <div></div>
            </template>
            <template #main>
              <div>
                <keep-alive>
                  <component :is="comName" :newUserInfo="userInfo" @logoutInfo="getLogoutInfo" @shareNewInfo="getNewInfo"></component>
                </keep-alive>
              </div>
            </template>
            <template #footer>
              <div></div>
            </template>
          </Aside>
        </div>
      </template>
      <template #footer>
        <div></div>
      </template>
    </TempPage>
  </div>
</template>

<script>
import TempPage from '@/components/TempPage'
import Artitalk from '@/components/Artitalk'
import UserModule from '@/components/UserModule'
import Aside from '@/components/Aside'

export default {
  name: 'ArtitalkPage',
  data () {
    return {
      artitalks: [],
      userInfo: {},
      comName: 'UserModule'
    }
  },
  components: {
    TempPage,
    Artitalk,
    UserModule,
    Aside
  },
  methods: {
    async initArtitalk () {
      const { data: res } = await this.$api.queryArtitalk()
      console.log(res)
      this.artitalks = res.data
      this.artitalks = this.artitalks.reverse()
    },
    getNewInfo (val) {
      setTimeout(() => {
        this.comName = val.comName
      }, 100)
      this.newUserInfo = val.userInfo
      // console.log(val)
    },
    getLogoutInfo (val) {
      // console.log(val)
      setTimeout(() => {
        this.comName = val
      }, 100)
    }
  },
  created () {
    this.initArtitalk()
  }
}
</script>

<style lang="less" scoped>
html,
body {
  width: 100%;
  // height: 100%;
}
.artitalkpage-container {
  width: 100%;
  height: 100%;
  background-image: -moz-linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
  background-image: -webkit-linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
  background-image: linear-gradient(45deg, rgb(209, 173, 255), rgb(184, 255, 238));
}
.page-main {
  display: flex;
  justify-content: center;
  // max-width: 1200px;
  width: 60%;
  // min-height: 500px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 50px 40px;
}
.main-left {
  // margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 50px 40px;
}
.main-left-title {
  text-align: center;
  font-size: 20px;
}
.login-module {
  display: flex;
  flex-direction: column;
  padding: 20px 15px;
  margin-bottom: 15px;
}
</style>
